<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>货款对账单</h3>
            </div>
            <div class="yuansdj">
              <div class="liebia">
                <el-tabs type="border-card">
                  <el-tab-pane label="货款明细">
                    <el-form ref="form" :model="form" label-width="120px">
                      <el-form-item label="日期">
                        <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="form.date1"
                          style="width: 30%;"
                        ></el-date-picker>
                      </el-form-item>
                      <el-form-item label="资金流向">
                        <el-checkbox-group v-model="form.type">
                          <el-checkbox label="收入" name="type"></el-checkbox>
                          <el-checkbox label="支出" name="type"></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="类型">
                        <el-radio-group v-model="form.resource">
                          <el-checkbox label="交易收入" name="type"></el-checkbox>
                          <el-checkbox label="提现" name="type"></el-checkbox>
                          <el-checkbox label="转账" name="type"></el-checkbox>
                          <el-checkbox label="推广服务费" name="type"></el-checkbox>
                          <el-checkbox label="扣款" name="type"></el-checkbox>
                          <el-checkbox label="退款" name="type"></el-checkbox>
                          <el-checkbox label="充值" name="type"></el-checkbox>
                          <el-checkbox label="其他" name="type"></el-checkbox>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="金额">
                        <el-col :span="5">
                          <el-input v-model="form.data" style="width: 80%;"></el-input>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="5">
                          <el-input v-model="form.data1" style="width: 80%;"></el-input>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="商家订单号">
                        <el-input v-model="form.name" style="width: 30%;"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button @click="onSubmit">查询</el-button>
                        <el-button>导出</el-button>
                      </el-form-item>
                    </el-form>
                    <div>
                      <div class="toen_omn">查询结果</div>
                      <div class="wdwmn_wa">
                        <div>
                          收入金额:
                          <span>0.00</span>元
                        </div>
                        <div>
                          收入金额:
                          <span>0</span>笔
                        </div>
                        <div>
                          支出金额:
                          <span>0.00</span>元
                        </div>
                        <div>
                          支出笔数:
                          <span>0.00</span>元
                        </div>
                      </div>
                    </div>
                    <div class="dzlist">
                      <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}"
                      >
                        <el-table-column prop="name" label="入账时间"></el-table-column>
                        <el-table-column prop="date" label="收支金额(元)"></el-table-column>
                        <el-table-column prop="address" label="商户订单号"></el-table-column>
                        <el-table-column prop="eee" label="财务类型"></el-table-column>
                        <el-table-column prop="eee" label="备注"></el-table-column>
                      </el-table>
                      <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="日汇总">
                    <div class="fafeww">
                      <div class="winwe">月份</div>
                      <div>
                        <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
                      </div>
                      <div class="buoo_A">查询</div>
                      <div class="buoo_A">重置</div>
                    </div>
                    <div class="dzlist">
                      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}">
                        <el-table-column prop="name" label="日期"></el-table-column>
                        <el-table-column prop="date" label="收入(元)" ></el-table-column>
                        <el-table-column prop="address" label="收入笔数" ></el-table-column>
                        <el-table-column prop="eee" label="支出(元)"></el-table-column>
                        <el-table-column prop="eee" label="支出笔数" ></el-table-column>
                        <el-table-column prop="eee" label="收益(元)"></el-table-column>
                        <el-table-column prop="eee" label="期初余额"></el-table-column>
                        <el-table-column prop="eee" label="期末余额"></el-table-column>
                        <el-table-column prop="eee" label="查看明细"></el-table-column>
                      </el-table>
                      <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="月汇总">
                    <div class="fafeww">
                      <div class="winwe">年份</div>
                      <div>
                        <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in 12"
                            :key="item"
                            :v-model="item"
                            :label="item"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </div>
                      <div class="buoo_A">查询</div>
                      <div class="buoo_A">重置</div>
                    </div>
                    <div class="dzlist">
                      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}">
                        <el-table-column prop="name" label="月份"></el-table-column>
                        <el-table-column prop="date" label="收入(元)"></el-table-column>
                        <el-table-column prop="address" label="收入笔数"></el-table-column>
                        <el-table-column prop="eee" label="支出(元)"></el-table-column>
                        <el-table-column prop="eee" label="支出笔数" ></el-table-column>
                        <el-table-column prop="eee" label="收益(元)"></el-table-column>
                        <el-table-column prop="eee" label="期初余额" ></el-table-column>
                        <el-table-column prop="eee" label="期末余额"></el-table-column>
                        <el-table-column prop="eee" label="查看明细" >
                          <template slot-scope="scope">
                            <el-button v-model="scope.row.pass" type="text">查看明细</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      value1: "",
      value2: "",
      value: "",
      form: {
        name: "",
        date1: "",
        type: [],
        resource: "",
        data: "",
        data1: ""
      },
      tableData: []
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  margin-top: 15px;
  padding-bottom: 10px;
}
.wdwmn_wa {
  width: 870px;
  margin: 15px auto;
  height: 104px;
  background-color: #eeeeee;
  display: flex;
  text-align: center;
  line-height: 104px;
}
.wdwmn_wa div {
  margin-left: 50px;
  font-size: 18px;
}
.wdwmn_wa span {
  font-size: 24px;
  color: #f06048;
}
.toen_omn {
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 20px;
}
.fafeww {
  display: flex;
  line-height: 35px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.fafeww .winwe {
  font-size: 20px;
  margin-left: 50px;
  margin-right: 10px;
}
.fafeww .buoo_A {
  height: 20px;
  width: 70px;
  text-align: center;
  line-height: 20px;
  background-color: #f06048;
  color: #fff;
  border-radius: 5px;
  margin-left: 30px;
  margin-top: 8px;
}
</style>